<template>
  <el-cascader
    v-model.trim="modelValue"
    :placeholder="conf.__config__.placeholder"
    :options="regionData"
    clearable
    @change="handleChange"
  ></el-cascader>
</template>

<script>
import { regionData, codeToText } from 'element-china-area-data'
export default {
  components: {},
  inject: ['formSize'],
  props: {
    value: {
      default: ''
    },
    conf: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      regionData
    }
  },
  computed: {
    size() {
      return this.formSize?.() ?? 'small'
    },
    modelValue: {
      get() {
        return this.value ?? undefined
      },
      set(value) {
        const { provice, city, dist } = this.conf.__config__.bindregionKey
        this.$emit('input', value, {
          [provice]: codeToText[value[0]],
          [city]: codeToText[value[1]],
          [dist]: codeToText[value[2]]
        })
      }
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="scss"></style>
